.zoom-in-top-enter{
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center top; 
}

.zoom-in-top-enter-active{
    opacity: 1;
    transform: scaleY(1);
    transition: transform 1000ms cubic-bezier(0.23,1,0.32,1) 100ms, opacity  1000ms cubic-bezier(0.23,1,0.32,1) 100ms;
    // 改变动画的的原点
    transform-origin: center top; 
}

.zoom-in-top-exit{
    opacity: 1;
    transform: scaleY(1);    
    transform-origin: center bottom; 
}

.zoom-in-top-exit-active{
    opacity: 0;
    transform: scaleY(0);
    transition: transform 1000ms cubic-bezier(0.23,1,0.32,1) 100ms, opacity  1000ms cubic-bezier(0.23,1,0.32,1) 100ms;
    transform-origin: center bottom;
}